<html>
	<head>
        <title>Tumblr Slide Show!</title>
        <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
		<script type="text/javascript" src="lib/jquery.js"></script>
		<script type="text/javascript" src="lib/jquery.cycle.js"></script>
        <script type="text/javascript">
			var num = 1;
			var pn = -1;
			var page = 1;
			var s=1;
			var name;
			var pFlag = true;
			$(document).ready(function() {
				name = prompt("Enter the Tumblr ID","e-jigsaw");
				for(var t=0; t<3; t++) getData();
				$("#pause").click(function() {
					if(pFlag) {
						$("#s"+s).cycle("pause");
						$("#pause").attr("src", "/icons/control_play.png");
						pFlag = false;
					} else {
						$("#s"+s).cycle("resume");
						$("#pause").attr("src", "/icons/control_pause.png");
						pFlag = true;
					}
				});
			});
			
			function getData() {
				$.ajax({
					url: "http://"+name+".tumblr.com/page/"+page,
					success: function(data) {
						$("#tmp").removeAttr("innerHTML");
						$("#tmp").append(data).hide();
						$("#s"+(s-1)).cycle("stop").hide();
						$("#main").append("<div id=s"+s+" class=pics></div>");
						var i=0;
						while($(".photo:eq("+i+") img").attr("src") != undefined) {
							url = $(".photo:eq("+i+") img").attr("src");
							pn++;
							$("#s"+s).append("<img src="+url+" alt="+pn+" >");
							i++;
						}
						$("#s"+s).cycle({
							fx: "fade",
							next: "#next",
							prev: "#prev",
							after: onAfter
						});
					}
				});
				page++;
				air.trace("page"+(page-1)+"load done!");
			}
			
			function onAfter() {
				air.trace("("+this.alt+"/"+pn+")");
				if(this.alt >= pn) {
					s++;
					for(var t=0; t<3; t++) getData();
				}
			}
        </script>
	</head>

    <body>
    	<center>
			<div id="nav">
				<img src="/icons/control_rewind.png" id="prev">
				<img src="/icons/control_pause.png" id="pause">
				<img src="/icons/control_fastforward.png" id="next">
			</div>
			<div id="main"></div>
		</center>
        <div id="tmp"></div>
    </body>
</html>